<template>
	<view>
		<view class="search-box">
			<mySearch @input1="input" ref="search"></mySearch>
		</view>

		<!-- 搜索结果 -->
		<!-- <view class="" v-if="searchResults.length > 0"> -->
		<view class="" v-if="showSearch">
			<view class="keyword">
				搜索关键字: {{keyword}}
			</view>
			<view class="" v-for="(item,index) in searchResults" :key="index">
				<view class="search-list">
					<view class="search-name">
						{{item.goods_name}}
					</view>
					<u-icon name="arrow-right" color="#000" size="14"></u-icon>
				</view>
			</view>
		</view>

		<!-- 搜索历史 -->
		<view class="history" v-else-if="showHistory">
			<view class="history-icon">
				<text>搜索历史</text>
				<u-icon name="trash" color="#000" size="24" @click="trash"></u-icon>
			</view>
			<view class="history-list">
				<view class="history-name" v-for="(item,index) in historylist" :key="index">
					<navigator :url="`/subGoodsDetail/goods_list/goods_list?keyword=${item} `" open_type="navigateTo">
						<text>{{item}}</text>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 没有搜索结果 -->
		<view class="" v-else>
			<myEmpty mode="search" :windowHeight="100"></myEmpty>
		</view>
		<!-- 提示 -->
		<view class="">
			<u-modal :show="show" @confirm="confirm" ref="uModal" :asyncClose="true" :title="title" :content='content'
				style="text-align: center;" :showCancelButton="true" @cancel="cancel"></u-modal>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "", //关键字
				searchResults: [], // 搜索结果列表
				historylist: [], //搜索历史
				showHistory: false,
				// showSearch: false,
				showSearch: false,
				show: false,
				title: '提示',
				content: '确认删除搜索历史记录'
			};
		},
		onLoad(option) {
			uni.$setNavigationBarColor()
			this.keyword = option.keyword
			this.getSearchList() // 根据关键词，查询搜索建议列表
		},
		methods: {
			//再次关键字,存储
			input(val) {

				if (val == "true") {
					this.keyword = ''
					this.showHistory = true
					this.showSearch = false
					this.searchResults = []
				} else {
					this.keyword = val
					this.getSearchList()
				}
			},
			//根据搜索关键词，搜索商品建议列表
			async getSearchList() {
				// 判断关键词是否为空
				if (this.keyword === '') {
					this.showSearch = false
					this.showHistory = false
					this.searchResults = []
					return
				}
				//存储历史记录
				this.historylist.push(this.keyword)
			
				this.historylist = [...new Set(this.historylist)]
				// console.log(this.historylis, "set")
				// 发起请求，获取搜索建议列表
				const {
					data: res
				} = await uni.$http.get('/api/public/v1/goods/qsearch', {
					query: this.keyword
				})
				if (res.meta.status !== 200) return uni.$showToast(res.meta.msg, "error")
				this.searchResults = res.message
				if (this.searchResults.length == 0) {
					this.showSearch = false
					this.showHistory = false
				} else {
					this.showSearch = true
					this.showHistory = false
				}
				this.$refs.search.keyword = ''
			},
			//打开删除提示
			trash() {
				this.show = true;
			},
			// 关闭删除提示
			cancel() {
				this.show = false;
			},
			//清除历史记录
			confirm() {
				uni.removeStorageSync('key')
				this.historylist = []
				this.show = false

			},

		},
		//保存历史
		onShow() {
			if (uni.getStorageSync('key')) {
				this.historylist = uni.getStorageSync('key')
			}

		},
		//删除历史
		onUnload() {
			uni.setStorageSync('key', this.historylist)
		}
	}
</script>

<style lang="scss">
	.search-list {
		display: flex;
		justify-content: space-between;

		.search-name {
			font-size: 24rpx;
			padding: 13px 0;
			align-items: center;
			justify-content: space-between;
			// 文字不允许换行（单行文本）
			white-space: nowrap;
			// 溢出部分隐藏
			overflow: hidden;
			// 文本溢出后，使用 ... 代替
			text-overflow: ellipsis;
			margin-right: 3px;
		}
	}

	.keyword {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 15rpx 0;
		background-color: gainsboro;
		font-size: 28rpx;
		font-weight: 600;
		color: red;
	}

	.search-box {
		position: sticky;
		z-index: 9999;
		top: 0;
	}

	.history {
		margin-bottom: 30rpx;

		.history-icon {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			margin: 20rpx 10rpx;
		}

		.history-list {
			display: flex;
			flex-wrap: wrap;


			.history-name {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				margin: 20rpx;
			}
		}
	}
</style>